<template>
  <div v-if="date" class="search-date">
    <a-date-picker v-model:value="dateValue" :bordered="false"
                   format="YYYY-MM-DD"
                   @change="$emit('dateChange', dateValue)"
    />
  </div>
  <div :style="{width:date?'250px':''}" class="search-bar">
    <div class="input-box">
      <div class="icon">
        <search-outlined/>
      </div>
      <div class="input">
        <input v-model="searchValue" :placeholder="placeholder">
      </div>
    </div>

    <div  class="btn" @click="$emit('search', searchValue)">
      <a-spin v-if="loading"/>
      <template v-else>
        搜索
      </template>
    </div>

  </div>
</template>

<script setup>
import {ref} from "vue";
import {SearchOutlined} from "@ant-design/icons-vue";

// eslint-disable-next-line no-undef
defineProps({
  placeholder: {
    type: String,
    default: "",
  },
  date: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  }
});

// eslint-disable-next-line no-undef
defineEmits(["search", "dateChange"]);

const searchValue = ref("");
const dateValue = ref("");

defineExpose({
  dateValue
})
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
